<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>搜索</title>
    <link rel="stylesheet" href="../font-awesome/css/font-awesome.min.css">

    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
    <link rel="stylesheet" href="../css/indexStyle.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
</head>
<style>
    a{
        text-decoration: none;
        color: black;
    }
    a:hover{
        color: rgba(34,34,34,0.87);
    }
    .body {
        width: 80%;
        height: 900px;
        position: absolute;
        margin-top: 20px;
        margin-left: 160px;
        border-radius: 30px;
    }

    .body-1 {
        width: 85%;
        height: 160px;
        background-color: rgba(214,214,214,0.27);
        margin: 45px auto;
        border-radius: 10px;
        display: flex;
        flex-direction: row;
    }

    .body-2 {
        width: 150px;
        height: 130px;
        background-color: rgba(203, 203, 203, 0.27);
        margin-left: 30px;
        margin-top: 15px;
        border-radius: 15px;
    }

    .body-2 > img {
        width: 95%;
        height: 95%;
        margin-top: 8px;
        margin-left: 8px;
        /*border-radius: 30px;*/
    }

    .body-3 {
        width: 74%;
        height: 130px;
        background-color: white;
        margin-left: 25px;
        margin-top: 15px;
        border-radius: 10px;
        flex-direction: column;
    }

    .name {
        width: 600px;
        height: 33px;
        /*background-color: rgba(203, 203, 203, 0.27);*/
        margin-top: 10px;
        margin-left: 5px;
    }
    .name-1 {
        width: 600px;
        height: 40px;
        /*background-color: rgba(203, 203, 203, 0.27);*/
        margin-top: 5px;
        margin-left: 5px;
        position: absolute;
    }

    .name-2 {
        width: 100px;
        height: 30px;
        /*background-color: rgba(203, 203, 203, 0.27);*/
        margin-top: 30px;
        margin-left: 5px;
        position: absolute;
    }
    .name-3 {
        width: 120px;
        height: 30px;
        /*background-color: red;*/
        margin-top: -10px;
        margin-left: 300px;
        position: absolute;
        border-radius: 5px;
    }
    .name-3>input{
        height: 35px;
        margin-top: 3px;
        margin-left: 5px;
        border-radius: 5px;
        border: 0px;
        background-color: red;
        color: white;
    }
</style>
<body>
<!--    导航栏-->
<div th:replace="~{header :: header}"></div>
<div class="body">
    <div class="body-1" th:if="${goodsList.size()==0}">
        <div align="center">
            <h3>什么都没找到哦~</h3>
        </div>

    </div>
    <div class="body-1"  th:each="goods:${goodsList}">
            <div class="body-2">
                <a th:href="@{/goods/goodsDetail(goodsId=${goods.getGoodsId()})}">
                    <img  width="100%" height="100%" th:src="${goods.getGoodsImage()}">
                </a>
            </div>
            <div class="body-3">
                <div class="name">
                    <a th:href="@{/goods/goodsDetail(goodsId=${goods.getGoodsId()})}">
                        <span style="margin-top: 7px; font-family: 黑体;" th:text="${goods.getGoodsName()}">商品的名字</span>
                    </a>
                </div>
                <div class="name-1">
                    <span style="font-size: 15px; font-family: 黑体;" th:text="${goods.getGoodsKind()}">类型</span><br>
                </div>
                <div class="name-2">
                    <div style="margin-top: 10px;">
                        <p style="color: red">
                            <span>
                                价格:
                            </span>
                            ￥<a th:text="${goods.getGoodsPrice()}"></a>
                        </p>
                    </div>
                    <a th:href="@{/cart/addCart(goodsId=${goods.getGoodsId()},goodsNumber=1)}">
                        <div class="name-3">
                            <i style="margin-left: 15px; color: red" class="fa fa-cart-plus" aria-hidden="true"></i>
<!--                            <a value="添加购物车"></a>-->
                        </div>
                    </a>
                </div>
            </div>

    </div>
</div>
</body>
</html>